<template>
    <div>
        <Header :title="t('home.Mine.authentication')">
            <template #left>
                <van-icon name="arrow-left" color="#fff" size="25px" class="icon-left" @click="goBack()" />
            </template>
        </Header>
        <main>
            <myInput icon-name="user-circle-o" v-model="setAuth.idName" :placeholder="t('authentication.realname')">
            </myInput>
            <myInput icon-name="desktop-o" v-model="setAuth.idNumber" :placeholder="t('authentication.idNumber')"></myInput>
            <div class="upload">
                <div class="postive div">
                    <div class="left">
                        <van-uploader ref="Uploader1" max-count="1" :after-read="onAfterRead" :show-upload="false"
                            v-model="postive" multiple />
                    </div>
                    <div class="right">
                        <div class="btn" @click="upload('postive')">{{ t('authentication.postive') }}</div>
                    </div>
                </div>
                <div class="negtive div">
                    <div class="left">
                        <van-uploader ref="Uploader2" max-count="1" :after-read="onAfterRead" :show-upload="false"
                            v-model="negtive" multiple />
                    </div>
                    <div class="right">
                        <div class="btn" @click="upload('negtive')">{{ t('authentication.negtive') }}</div>
                    </div>
                </div>
                <div class="save" @click="submit">{{ t('authentication.save') }}</div>
            </div>
        </main>
    </div>
</template>

<script setup>
import Header from "@/components/Header/index.vue";
import myInput from '@/components/Input/index.vue';
import useLanguage from '@/hooks/useLanguage';
import { useRouter } from 'vue-router'
import { reactive, onMounted, ref } from 'vue'
import { userApi } from '@/api'
import { showNotify } from 'vant';
const router = useRouter()
const { t } = useLanguage()

function goBack() {
    router.go(-1)
}

const setAuth = reactive({
    idName: '',
    idNumber: '',
    idCardImg1: '',
    idCardImg2: '',
})
const rules = {
    idName: [{ rule: /\S+/, message: t('authentication.realname-notEmp') }],
    idNumber: [{ rule: /^.{9,18}$/, message: t('authentication.idNumber-notEmp') }],
    idCardImg1: [{ rule: /\S+/, message: t('authentication.upload1') }],
    idCardImg2: [{ rule: /\S+/, message: t('authentication.upload2') }],
}

const postive = ref([])
const negtive = ref([])
const Uploader1 = ref(null)
const Uploader2 = ref(null)
const curUpload = ref(0)

function upload(type) {
    if (type == 'postive') {
        curUpload.value = 0
        Uploader1.value.chooseFile()
    } else {
        curUpload.value = 1
        Uploader2.value.chooseFile()
    }
}

async function onAfterRead(file, detail) {
    const formData = new FormData()
    formData.append('file', file.file)
    if (curUpload.value == 0) {
        const { code, data } = await userApi.upload(formData)
        if (code == 20000) {
            setAuth.idCardImg1 = data
        }
    } else {
        const { code, data } = await userApi.upload(formData)
        if (code == 20000) {
            setAuth.idCardImg2 = data
        }

    }
}

function validate(key) {
    let s = true
    rules[key].forEach(v => {
        if (!v.rule.test(setAuth[key])) {
            // 弹窗
            showNotify({ type: 'warning', message: v.message })
            s = false
            return false
        }
    })
    return s
}

function submit() {
    if (!validate('idName')) return // 当validate('idName')为false才执行
    if (!validate('idNumber')) return // 当validate('idNumber')为false才执行
    if (!validate('idCardImg1')) return // 当validate('idCardImg1')为false才执行
    if (!validate('idCardImg2')) return // 当validate('idCardImg2')为false才执行
    // 登录
    authentication()
}

async function authentication() {
    const { code, data } = await userApi.authentication(setAuth)
    if (code == 20000) {    
        showNotify({ type: 'success', message: t('authentication.authentication-success')})
        goBack()
    } 
    // else {
    //     showNotify({ type: 'success', message: t('authentication.authentication-error')})
    // }
}

onMounted(() => {

})
</script>

<style lang="less" scoped>
.icon-left {
    margin-left: 10px;
}

main {
    padding-top: 10px;

    .upload {
        display: flex;
        flex-direction: column;
        width: 100%;

        .div {
            display: flex;
            justify-content: space-between;
            padding: 10px 25px;

            .left {
                margin: auto;
            }

            .right {
                text-align: center;
                word-break: keep-all;

                .btn {
                    border-radius: 3px;
                    border: 1px solid #E0E0E0;
                    font-size: 14px;
                    padding: 5px 20px;
                    box-sizing: border-box;
                    color: #2196F3;
                }
            }
        }

        .save {
            margin-left: auto;
            margin-right: 25px;
            text-align: center;
            word-break: keep-all;
            font-size: 14px;
            color: #2196F3;
            border: #E0E0E0 1px solid;
            padding: 5px 20px;
            border-radius: 3px;
            box-sizing: border-box;
            margin-top: 5px;
        }
    }
}
</style>